import React, { useState } from 'react';
import '../global.css';
import Content from './Content.jsx';
import { history } from 'umi';
import NavBarUi from '../components/navBar/navBarUi';
import { navListOut } from '../components/navBar/data';

// 引入redux相关的内容

function BasicLayout(props) {
  const [activeIndex, setActiveIndex] = useState(0);
  const [navList, setNavList] = useState(navListOut);

  const handelNavChange = (item, aIndex) => {
    history.replace(item.path);
    setActiveIndex(aIndex);
  };

  return (
    <>
      {/* 头部导航 */}
      <NavBarUi
        handelNavChange={handelNavChange}
        navList={navList}
        activeIndex={activeIndex}
      />
      <Content activeIndex={activeIndex}>{props.children}</Content>
    </>
  );
}

export default BasicLayout;
